<template>
  <div class="index">
    <div class="info">
      <img src="@/assets/img/bg4.png" class="img-background" />
      <h4 class="title">您的所求, 应有尽有</h4>
      <h5 class="title-next">
        <span>完善的信用体系——安全</span>
        <span>精准的需求匹配——高效</span>
        <span>树型的项目结构——细致</span>
      </h5>
      <div class="info-list">
        <div class="info-item" @click="handleLinkClick('/main/tasksquare')">
          <h6>寻找任务</h6>
          <p>搜索关键词，帮助您快速寻找匹配度高的项目</p>
        </div>
        <div class="info-item last-item" @click="handleLinkClick('/main/createproject')">
          <h6>新建项目</h6>
          <p>提供项目需求，打造专属项目</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function handleLinkClick(url: string) {
  router.push(url)
}
</script>

<style lang="less" scoped>
.index {
  background-color: #fff;
  .info {
    padding-top: 80px;
    width: 1100px;
    margin: auto;
    position: relative;
    .img-background {
      z-index: -1;
      border-radius: 10px;
    }
    .title {
      position: absolute;
      left: 80px;
      top: 50px;
      color: #fff;
      font-size: 38px;
      font-weight: 500;
    }
    .title-next {
      position: absolute;
      left: 120px;
      top: 200px;
      color: #fff;
      font-size: 18px;
      font-weight: 200;
      span {
        display: block;
        padding: 3px 0;
        letter-spacing: 2px;
      }
    }
    .info-list {
      margin-top: 40px;
      padding: 0 80px;
      display: flex;
      justify-content: space-between;
      .info-item {
        position: absolute;
        bottom: 80px;
        cursor: pointer;
        width: 330px;
        height: 150px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        border: 1px solid rgba(235, 236, 237, 0.2);
        backdrop-filter: blur(10px);
        h6 {
          font-size: 20px;
          font-weight: 500;
          color: #fff;
          line-height: 28px;
          margin-left: 24px;
          margin-top: 26px;
        }
        p {
          width: 280px;
          margin-left: 24px;
          margin-top: 16px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
          line-height: 20px;
        }
      }
    }
    .last-item {
      right: 80px;
    }
    .info-item::after {
      content: '';
      position: absolute;
      right: 24px;
      top: 24px;
      width: 32px;
      height: 32px;
      background: url('@/assets/img/intro-link.png') no-repeat 50% 50%;
      background-size: 32px auto;
    }
  }
}
</style>
